import React, { memo, useEffect, useCallback, useState } from 'react'
import { Link } from "react-router-dom";

import style from "./style.css";
import { getTime } from "@/utils/date";
import { playlistDetailReq } from "@/utils/api/album";

const GeDanDetail = memo(({ match, total, playSong, addSong, noOpenup, scrollComment }) => {
  console.log(match, 'match');
  const [detail, setDetail] = useState(null);
  const [isShowAll, setIsShowAll] = useState(false);
  const [songs, setSongs] = useState([]);
  const [onMouseIndex, setOnMouseIndex] = useState(1);

  useEffect(() => {
    const getData = async () => {
      const resOne = await playlistDetailReq({ id: match.params.id });
      if (resOne.data.code === 200) {
        setDetail(resOne.data.playlist);
        setSongs(resOne.data.playlist.tracks);
      }
    };
    getData();
  }, []);

  const onMouserEvent = useCallback(
    (val, index) => {
      if (val == "over") {
        setOnMouseIndex(index);
      } else if (val == "leave") {
        setOnMouseIndex(1);
      }
    },
    [onMouseIndex]
  );

  if (!detail) {
    return <div>Loading...</div>;
  } else {
    console.log(songs, "songs");
  }

  return (
    <>
      <div className={style.listdetail}>
        <div className={style.ldleft}>
          <img
            src={detail.coverImgUrl}
            alt="歌单背景图片"
            width="200"
            height="200"
          />
        </div>
        <div className={style.ldright}>
          <div style={{ display: "flex", fontSize: "12px", alignItems: 'center' }}>
            <div className={style.gedangicon}></div>
            <span style={{ marginLeft: "10px" }}>{detail.name}</span>
          </div>
          <div className={style.nameandDate}>
            <img
              src={detail.creator.avatarUrl}
              alt="头像"
              width="40"
              height="40"
            />
            <span style={{ color: "#0c73c2" }}>{detail.creator.nickname}</span>
            <span style={{ color: "#999" }}>
              {getTime(detail.updateTime)} 创建
            </span>
          </div>
          <div className={style.gcbtns}>
            <button className={style.bofang} onClick={() => playSong(1, 1, songs)}>
              <img src={require("./svgs/play.svg").default} alt="播放" />
              播放
            </button>
            <button className={style.bofang} onClick={() => addSong(1, 1, songs)}>添加歌单</button>
            <button className={style.bofang} onClick={() => noOpenup()}>
              <img src={require("./svgs/star.svg").default} alt="收藏" />
              收藏
            </button>
            <button className={style.bofang} onClick={() => noOpenup()}>
              <img src={require("./svgs/share.svg").default} alt="分享" />
              分享
            </button>
            <button className={style.bofang} onClick={() => noOpenup()}>
              <img src={require("./svgs/down.svg").default} alt="下载" />
              下载
            </button>
            <button className={style.bofang} onClick={() => scrollComment()}>
              <img src={require("./svgs/coment.svg").default} alt="评论" />(
              {total})
            </button>
          </div>
          <div>
            <span>标签：</span>
            {detail.tags.map((item) => (
              <span className={style.tagname}>{item}</span>
            ))}
          </div>
          <div
            className={style.gclrc}
            style={{ height: isShowAll ? "auto" : "90px", overflow: "hidden" }}
          >
            <pre>介绍：{detail.description}</pre>
          </div>

          {detail.description ? (
            <div
              className={style.showall}
              onClick={() => setIsShowAll(!isShowAll)}
            >
              <Link to="#">{isShowAll ? "收起" : "展开"}</Link>
              <img src={require("./svgs/xiangxia.png").default} alt="下箭头" />
            </div>
          ) : null}
        </div>
      </div>
      {songs.length ? (
        <table className={style.zjBottomList} width="640">
          <thead>
            <tr style={{ backgroundColor: "#f5f5f5" }}>
              <th style={{ width: "80px" }}></th>
              <th style={{ width: "172px" }}>歌曲标题</th>
              <th style={{ width: "100px" }}>时长</th>
              <th style={{ width: "120px" }}>歌手</th>
              <th>专辑</th>
            </tr>
          </thead>
          <tbody>
            {songs.map((item, index) => {
              return (
                <tr key={index}>
                  <td className={style.tdone} id={style.tdone}>
                    <span>{index + 1}</span>{" "}
                    <img
                      src={require("./svgs/playtwo.svg").default}
                      alt="播放"
                      onClick={() => playSong(item.id)}
                    />
                  </td>
                  <td className={style.tdtwo}>
                    <a className={style.texteli} style={{ width: "164px" }}>
                      {item.name}
                      {item.tns ? `- ${item.tns[0]}` : ""}
                    </a>
                  </td>
                  <td
                    className={style.tdthree}
                    id={style.tdthree}
                    onMouseOver={() => onMouserEvent("over", index + 1)}
                    onMouseLeave={() => onMouserEvent("leave", index + 1)}
                  >
                    <div
                      style={{
                        display: index + 1 == onMouseIndex ? "block" : "none",
                      }}
                    >
                      <img
                        src={require("./svgs/playtwo.svg").default}
                        alt="播放"
                        onClick={() => playSong(item.id)}
                      />
                      <img
                        src={require("./svgs/star.svg").default}
                        alt="添加歌单"
                        onClick={() => addSong(item.id)}
                      />
                      <img
                        src={require("./svgs/share.svg").default}
                        alt="分享"
                      />
                      <img
                        src={require("./svgs/down.svg").default}
                        alt="下载"
                      />
                    </div>
                    <span
                      style={{
                        display: index + 1 == onMouseIndex ? "none" : "block",
                      }}
                    >
                      {getTime(item.dt, 2)}
                    </span>
                  </td>
                  <td className={style.tdfour}>
                    <a className={style.texteli} style={{width: '120px'}}>
                      {item.ar.length ? item.ar[0].name : ""}
                    </a>
                  </td>
                  <td className={style.tdFive}>
                    <a className={style.texteli} style={{width: '140px'}}>
                      {item.al ? item.al.name : ''}
                    </a>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      ) : null}
    </>
  );
});

export default GeDanDetail